<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {block name="title"}
    <title>[ Stu List ]</title>
    {/block}

    {css href="_CSS_zui.min.css"}
    {css href="_CSS_zui-theme.css"}
    {css href="_CSS_reset.css"}

    {block name="css"}
    {css href="_CSS_score.css"}
    {/block}
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-collapse-example">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/"><img src="_IMG_logo.png" width="100"></a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-example">
            <ul class="nav navbar-nav">
                <li><a href="{:url('index/user/index')}"><i class="icon icon-user"></i> 学员列表</a></li>
                <li><a href="{:url('index/score/index')}"><i class="icon icon-line-chart"></i> 积分列表</a></li>
                <li><a href="{:url('index/group/index')}"><i class="icon icon-tags"></i> 班期管理</a></li>
                <li><a href="{:url('index/index/roll')}" target="_blank"><i class="icon icon-yinyang icon-spin"></i> 点名器</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="{:url('index/user/admin',['id'=>session('admin.id')])}"><i class="icon icon-desktop"></i>
                    {:session('admin.name')}</a></li>
                <li><a href="{:url('index/login/logout')}"><i class="icon icon-times"></i> 登出</a></li>
            </ul>
        </div>
    </div>
</nav>

{block name="main"}
<div class="container mt40">
    <div class="row">
        <h1 style="font-size:35px">
            <i class="icon icon-user icon-3x icon-spin"></i>
            学员列表
            <small>Stu List</small>
        </h1>
        <div class="col-md-4">
            <h4>
                记录人数: {$totalId} <i class="icon icon-user"></i> |
                在校生总数: {$total} <i class="icon icon-user"></i> |
                本页人数: {$totalpage} <i class="icon icon-user"></i>
            </h4>
        </div>
        <div class="col-md-4 col-md-offset-4">
            <form class="form-inline" action="{:url('index/user/index')}" method="get">
                <div class="form-group">
                    <input type="text" name="name" value="{:input('get.name')}" class="form-control text-center"
                           placeholder="搜索 | Search Name">
                </div>

                <div class="form-group">
                    <select name="class" class="form-control">
                        <option value="">Select...</option>
                        {foreach $class as $val}
                        <option value="{$val['class_name']}"
                                {if condition="input('get.class') == $val['class_name']"}
                                selected
                                {/if}
                        >
                        {$val['class_name']}
                        </option>
                        {/foreach}
                    </select>
                </div>

                <button type="submit" id="searchBtn" class="btn btn-info" data-toggle="tooltip" data-placement="top"
                        title="搜索查询">
                    <i class="icon icon-search"></i>
                </button>
                <a href="{:url('index/user/create')}" class="btn btn-primary" data-toggle="tooltip" data-placement="top"
                   title="新增学员">
                    <i class="icon icon-plus"></i>
                </a>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="table-responsive">
            <table class="table table-hover table-striped mt30">
                <thead>
                <tr>
                    <th class="text-center">ID</th>
                    <th class="text-center col-md-2"><i class="icon icon-keyboard"></i> 姓名</th>
                    <th class="text-center col-md-1"><i class="icon icon-line-chart"></i> 积分</th>
                    <th class="text-center col-md-1"><i class="icon icon-yinyang icon-spin"></i> 性别</th>
                    <th class="text-center col-md-1"><i class="icon icon-tags"></i> 现在班期</th>
                    <th class="text-center col-md-1"><i class="icon icon-phone"></i> 电话</th>
                    <th class="text-center col-md-1"><i class="icon icon-star-half-full"></i> 状态</th>
                    <th class="text-center col-md-2"><i class="icon icon-wrench"></i> 编辑</th>
                    <th class="text-center col-md-3"><i class="icon icon-bookmark"></i> 内部管理项，<span class="text-danger"
                                                                                                    oncopy="copy()">请勿</span>暴露给学员
                    </th>
                </tr>
                </thead>

                <tbody style="font-size:19px">
                {if condition="empty($data)"}
                <tr class="text-center">
                    <td colspan="9" class="danger">[ 查 无 数 据 ]</td>
                </tr>
                {else /}
                {foreach $data as $v}
                <tr class="text-center">
                    <td>{$v['id']}</td>
                    <td class="success text-left">{$v['uname']}</td>
                    <td class="success text-right">{$v['scoreSum']} 分</td>
                    <td>
                        {switch name="$v['usex']" }
                        {case value="0"}女<i class="icon icon-venus"></i>{/case}
                        {case value="1"}<i class="icon icon-mars"></i> 男{/case}
                        {default /}未知
                        {/switch}
                    </td>
                    <td>{$v['uclass']}</td>
                    <td>{$v['utel']}</td>
                    <td>
                        <div class="switch switch-inline">
                            <input
                                    type="checkbox" class="ustatus" data-id="{$v['id']}"
                                    {if condition="$v['ustatus'] == 1" }
                                    checked="checked" data-on="1"
                                    {else/}
                            data-on="0"
                            {/if}
                            >
                            <label>{if condition="$v['ustatus'] == 1"}在校{else/}离校{/if}</label>
                        </div>
                    </td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-warning showBtn" data-id="{$v['id']}"
                                    data-toggle="tooltip" data-placement="top" title="积分详情">
                                <i class="icon icon-stack"></i>
                            </button>
                            <a href="{:url('index/user/edit',['id'=>$v['id']])}" class="btn btn-info editBtn"
                               data-toggle="tooltip" data-placement="top" title="编辑学员信息">
                                <i class="icon icon-wrench"></i>
                            </a>
                            <button type="button" class="btn btn-danger scoreBtn" data-id="{$v['id']}"
                                    data-toggle="tooltip" data-placement="top" title="扣分">
                                <i class="icon icon-minus"></i>
                            </button>
                            {if condition="session('admin.level') > 0"}
                            <button type="button" class="btn btn-primary delBtn" data-id="{$v['id']}"
                                    data-toggle="tooltip" data-placement="top" title="删除">
                                <i class="icon icon-trash"></i>
                            </button>
                            {/if}
                        </div>
                    </td>
                    <td class="hidden umarks">
                        {if condition="empty($v['umarks'])"}
                        暂无
                        {else/}
                        {$v['umarks']}
                        {/if}
                    </td>
                </tr>
                {/foreach}
                {/if}
                </tbody>
            </table>
        </div>
    </div>
    <hr>

    <div class="col-md-12 text-center">
        <address>
            <a href="http://www.itxdl.cn" target="_blank" style="color:#333">Copyright&nbsp;<span
                    class="glyphicon glyphicon-copyright-mark"></span>
                &nbsp;2015&nbsp;&nbsp;• itxdl.cn</a> 丨
            <a href="http://weibo.com/sosdust" target="_blank" style="color:#333"> 探索者丶枫 [ 讲师.黄超 ]</a>
        </address>
    </div>
</div>

<div class="modal fade" id="scoreModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">关闭</span></button>
                <h1 class="modal-title text-center">记录 [ <b class="text-danger">XXX</b> ] 的扣分信息</h1>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="scoreForm">
                    <input type="hidden" name="id">

                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <p class="form-control-static">扣分原因: (无提供选项，请选择【其他】手动填写理由)</p>
                        </div>

                        <div class="col-md-3 col-md-offset-1">
                            <div class="input-control has-label-left has-label-right">
                                <div class="radio-primary">
                                    <input type="radio" name="info" id="info1" value="迟到" checked>
                                    <label for="info1">迟到 (-10)</label>
                                </div>
                                <div class="radio-primary">
                                    <input type="radio" name="info" id="info2" value="早退">
                                    <label for="info2">早退 (-10)</label>
                                </div>
                                <div class="radio-primary">
                                    <input type="radio" name="info" id="info3" value="未戴工牌">
                                    <label for="info3">未戴工牌 (-10)</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-control has-label-left has-label-right">
                                <div class="radio-primary">
                                    <input type="radio" name="info" id="info4" value="作业未完成">
                                    <label for="info4">作业未完成 (-20)</label>
                                </div>
                                <div class="radio-primary">
                                    <input type="radio" name="info" id="info5" value="上课睡觉">
                                    <label for="info5">上课睡觉 (-10)</label>
                                </div>
                                <div class="radio-primary">
                                    <input type="radio" name="info" id="info6" value="作业抄袭/考试作弊">
                                    <label for="info6">作业抄袭/考试作弊 (-20)</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-control has-label-left has-label-right">
                                <div class="radio-primary">
                                    <input type="radio" name="info" id="info7" value="上课手机响">
                                    <label for="info7">上课手机响 (-20)</label>
                                </div>
                                <div class="radio-primary">
                                    <input type="radio" name="info" id="info8" value="室内喧哗">
                                    <label for="info8">室内喧哗 (-20)</label>
                                </div>
                                <div class="radio-primary">
                                    <input type="radio" name="info" id="info9" value="看电影/打游戏">
                                    <label for="info9">看电影/打游戏 (-50)</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-md-offset-1">
                            <div class="radio-primary">
                                <input type="radio" name="info" id="orInfo">
                                <label for="orInfo">其他：</label>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <input type="text" id="orInfoInput" class="form-control input-sm text-center"
                                   placeholder="手动输入，其他扣分说明">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="input-control has-label-left has-label-right">
                                <input type="number" name="score" value="10" class="form-control text-center" max="100"
                                       min="0">
                                <label class="input-control-label-left">扣分:</label>
                                <label class="input-control-label-right text-right text-danger">0~100分</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="input-control has-label-left has-label-right">
                                <input type="number" name="fine" value="0"
                                       class="form-control text-center" max="100" min="0">
                                <label class="input-control-label-left">罚款:</label>
                                <label class="input-control-label-right text-right text-danger">0~100元</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="input-control has-label-left has-label-right">
                                <input type="date" name="ctime" value="{:date('Y-m-d')}"
                                       class="form-control text-center">
                                <label class="input-control-label-left">发生:</label>
                                <label class="input-control-label-right text-right text-danger">日期</label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showModal">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span
                        class="sr-only">关闭</span></button>
                <h1 class="modal-title text-center">
                    个人信息与积分详情
                </h1>
            </div>
            <div class="modal-body">
                <div class="row mt40">
                    <div class="col-md-2 col-md-offset-2">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <p class="text-right"><i class="icon icon-user"></i> <span
                                        class="label label-badge label-info"></span></p>
                                <h2 style="font-size: 50px"></h2>
                            </div>
                            <div class="panel-body">
                                <div class="list-group" id="info">
                                    <a class="list-group-item">
                                        <h4 class="list-group-item-heading">现在班期</h4>
                                        <p class="list-group-item-text text-danger"></p>
                                    </a>
                                    <a class="list-group-item">
                                        <h4 class="list-group-item-heading">原来班期</h4>
                                        <p class="list-group-item-text text-danger"></p>
                                    </a>
                                    <a class="list-group-item">
                                        <h4 class="list-group-item-heading">手机号</h4>
                                        <p class="list-group-item-text text-danger"></p>
                                    </a>
                                    <a class="list-group-item">
                                        <h4 class="list-group-item-heading">性别</h4>
                                        <p class="list-group-item-text text-danger"></p>
                                    </a>
                                    <a class="list-group-item">
                                        <h4 class="list-group-item-heading">在校状态</h4>
                                        <p class="list-group-item-text text-danger"></p>
                                    </a>
                                    <a class="list-group-item">
                                        <h4 class="list-group-item-heading">个性签名</h4>
                                        <p class="list-group-item-text text-danger"></p>
                                    </a>
                                    <a class="list-group-item">
                                        <h4 class="list-group-item-heading">备注</h4>
                                        <p class="list-group-item-text text-danger"></p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-md-offset-1">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <i class="icon icon-list"></i> 积分详情列表
                            </div>
                            <table id="scoreList" class="table table-hover table-bordered">
                                <thead>
                                <tr>
                                    <th class="col-md-1">ID</th>
                                    <th class="col-md-2"><i class="icon icon-time"></i> 时间</th>
                                    <th class="col-md-2"><i class="icon icon-times"></i> 扣分分值</th>
                                    <th class="col-md-2"><i class="icon icon-yen"></i> 罚款金额</th>
                                    <th><i class="icon icon-tag"></i> 扣分原因</th>
                                    <th><i class="icon icon-adjust"></i> 记录人ID</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

<button class="btn btn-link btn-warning" style="position: fixed; right:0px;bottom:10px" onclick="window.scrollTo(0,0)">
    <i class="icon icon-chevron-up icon-2x"></i>
</button>

{JS href="_JS_jquery-1.11.0.min.js"}
{JS href="_JS_zui.min.js"}

{block name="js"}
<script>
    $('[data-toggle="tooltip"]').tooltip();

    $('.scoreBtn').on('click', function () {
        $(this).blur();
        let id = $(this).attr('data-id');
        let name = $(this).parents('tr').children().get(1).innerText;
        $('#scoreModal form [name="id"]').val(id);
        $('#scoreModal .modal-title b').html(name);

        $('#scoreModal').modal({
            backdrop: 'static',
            keyboard: false,
            position: 'fit',
            moveable: 'inside'
        });
    });

    $('#saveBtn').on('click', function () {
        if ($('#orInfo').prop('checked')) {
            $('#orInfo').val($('#orInfoInput').val());
        }
        let data = $('#scoreForm').serialize();

        $.ajax({
            method: 'post',
            url: '/score',
            data: data,
            dataType: 'json',
            success: function (data) {
                let msg = data.msg + '（code: ' + data.code + '）';
                new $.zui.Messager(msg, {
                    time: 3000,
                    placement: 'top-right',
                    type: data.status,
                    close: false
                }).show();

                $('#scoreModal').modal('hide', 'fit');
            },
            error: function () {
                alert('操作失败，请重试！');
            }
        });
    });

    $('#orInfoInput').on('focus', function () {
        $('#orInfo').prop('checked', true);
    });

    $('.showBtn').on('click', function () {
        $(this).blur();

        let id = $(this).attr('data-id');
        let name = $(this).parents('tr').children().get(1).innerText;
        $('#showModal .modal-title b').html(name);

        $.ajax({
            method: 'get',
            url: '/user/' + id,
            dataType: 'json',
            success: function (data) {
                if (data.code == 200) {
                    $('#showModal .modal-body h2').html(data.list.uname);
                    $('#showModal .modal-body span').html(data.list.id);

                    let sex, status;
                    switch (data.list.usex) {
                        case 0 :
                            sex = '女';
                            break;
                        case 1 :
                            sex = '男';
                            break;
                        default :
                            sex = '未知';
                    }
                    switch (data.list.ustatus) {
                        case 0 :
                            status = '不在校';
                            break;
                        case 1 :
                            status = '在校';
                            break;
                        default :
                            status = '未知';
                    }
                    if (data.list.uinfo == null) data.list.uinfo = '暂无个性签名';
                    if (data.list.umarks == null) data.list.umarks = '暂无备注';
                    $('#info>a:eq(0) p').html(data.list.uclass);
                    $('#info>a:eq(1) p').html(data.list.uclassold);
                    $('#info>a:eq(2) p').html(data.list.utel);
                    $('#info>a:eq(3) p').html(sex);
                    $('#info>a:eq(4) p').html(status);
                    $('#info>a:eq(5) p').html(data.list.uinfo);
                    $('#info>a:eq(6) p').html(data.list.umarks);

                    // 积分信息
                    if (data.scoreList.length == 0) {
                        let html = '<tr><td colspan="6" class="text-center text-primary">查无数据</td></tr>';
                        $('#scoreList tbody').html(html);
                    } else {
                        $('#scoreList tbody').html('');
                        for (let i = 0; i < data.scoreList.length; i++) {
                            let html = `
                                    <tr>
                                        <td>${data.scoreList[i]['id']}</td>
                                        <td>${data.scoreList[i]['ctime']}</td>
                                        <td class="text-danger">- ${data.scoreList[i]['score']} 分</td>
                                        <td>- ${data.scoreList[i]['fine']} 元</td>
                                        <td>${data.scoreList[i]['info']}</td>
                                        <td>${data.scoreList[i]['adminid']}</td>
                                    </tr>
                                `;
                            $('#scoreList tbody').append(html);
                        }
                    }

                    $('#showModal').modal();
                } else {
                    new $.zui.Messager(data.list, {
                        time: 3000,
                        placement: 'top-right',
                        type: data.status,
                        close: false
                    }).show();
                }
            },
            error: function () {
                alert('查询失败，请重试！');
            }
        });
    });

    $('.ustatus').on('click', function () {
        let id = $(this).attr('data-id');
        let data = 'status=' + $(this).attr('data-on');
        let _this = $(this);
        $.ajax({
            method: 'put',
            url: '/user/status/' + id,
            data: data,
            dataType: 'json',
            success: function (data) {
                if (data.s == 1) {
                    _this.attr('data-on', data.s);
                    _this.attr('checked', true);
                    _this.next('label').html('在校');
                } else {
                    _this.attr('data-on', data.s);
                    _this.attr('checked', false);
                    _this.next('label').html('离校');
                }
            },
            error: function () {
                alert('操作失败，请重试！');
            }
        });
    });

    $('.delBtn').on('click', function () {
        if (confirm('确定是要 [ 删除 ] 该学员吗?')) {
            let id = $(this).attr('data-id');
            let _this = $(this);
            $.ajax({
                method: 'delete',
                url: '/user/' + id,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 200) {
                        _this.parents('tr').remove();
                    }
                    new $.zui.Messager(data.msg, {
                        time: 3000,
                        placement: 'top-right',
                        type: data.status,
                        close: false
                    }).show();
                },
                error: function () {
                    alert('操作失败，请重试！');
                }
            });
        }
    });

    // 触发显示备注栏目
    function copy() {
        $('.umarks').toggleClass('hidden');
    }
</script>
{/block}
</body>
</html>
